<template>
  <a-select
    v-model:value="selectedRoleVal"
    @change="selectedChange($event)"
    allowClear
    style="width: 100%"
    :maxTagCount="3"
    name="readState"
    :placeholder="l('NotificationStates')"
  >
    <a-select-option v-for="item in stateList" :value="item.value" :key="item.key">
      {{ item.key }}
    </a-select-option>
  </a-select>
</template>

<script lang="ts">
  import { AppComponentBase } from '/@/shared/component-base';
  import { defineComponent } from 'vue';
  import { AppUserNotificationState } from '/@/abpPro/AppEnums';
  export default defineComponent({
    name: 'notification-select',
    mixins: [AppComponentBase],
    props: {
      value: {
        type: Array,
      },
    },
    emits: ['update:value', 'change'],
    data() {
      return {
        stateList: [
          { key: this.l('NotificationRead'), value: AppUserNotificationState.Read },
          { key: this.l('NotificationUnread'), value: AppUserNotificationState.Unread },
        ],
      };
    },
    computed: {
      selectedRoleVal: {
        get() {
          return this.value;
        },
        set(val) {
          this.$emit('update:value', val);
        },
      },
    },
    methods: {
      selectedChange(selectKey) {
        this.selectedRoleVal = selectKey;
        this.$emit('change', selectKey);
      },
    },
  });</script
>s
